<template>
    <div class="config">
        <div class="config__title">设置密码</div>
        <div class="config__tip">密码长度应在 8-16 位，不能有空格。至少包含字母、数字、特殊字符中的两种。</div>
        <div class="config__content">
            <div class="config__ipt">
                <van-field :border="false" type="password" v-model="password" placeholder="请输入新密码" />
            </div>
            <div class="config__ipt">
                <van-field :border="false" type="password" v-model="newPassword" placeholder="请再次输入新密码" />
            </div>
            <div class="config__btn">
                找回密码
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref } from "vue"

const password = ref('');
const newPassword = ref('');
</script>
<style lang="scss" scoped>
.config {
    height: 100vh;
    background-color: #fff;
    box-sizing: border-box;
    padding: 36px;

    &__title {
        font-family: PingFangSC-Medium;
        font-size: 24px;
        color: #272B2D;
        letter-spacing: 0;
        line-height: 36px;
    }

    &__tip {
        margin-top: 6px;
        font-family: PingFangSC-Regular;
        text-align: justify;
        font-size: 14px;
        color: #676B6B;
        letter-spacing: 0;
        line-height: 21px;
        margin-bottom: 21px;

    }

    &__ipt {
        height: 46px;
        background: rgba(0, 0, 0, 0.04);
        margin-bottom: 12px;
        border-radius: 23px;
        display: flex;
        align-items: center;
        padding-left: 6px;
        ::v-deep .van-cell {
            background-color: transparent;
        }
    }

    &__btn {
        margin-top: 37px;
        padding: 13px 0;
        font-family: PingFangSC-Regular;
        font-size: 17px;
        color: #FFFFFF;
        text-align: center;
        background-image: linear-gradient(270deg, #1CA893 0%, #1BCD74 100%);
        border-radius: 22px;
    }

}
</style>